<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  isTransparent: { type: Boolean, default: false }
})

const goLoginPage = () => {
  router.replace('/login')
}
</script>

<template>
  <a-layout-header :class="[{ transparent: props.isTransparent }, 'header']">
    <div class="header-wrapper">
      <slot name="logo">
        <a href="/" class="logo">
          <img src="@/assets/img/logo.png" alt="" srcset="" />
        </a>
      </slot>
      <slot name="user">
        <div class="user">
          <div class="not-login">
            <a-button type="primary" shape="round" class="login-btn" @click="goLoginPage">
              登录
            </a-button>
          </div>
        </div>
      </slot>
    </div>
  </a-layout-header>
</template>

<style scoped lang="scss">
.ant-layout-header {
  &.transparent {
    background-color: rgba($color: #000000, $alpha: 0.5);
    position: absolute;
    width: 100%;
    z-index: 1;
  }

  .header-wrapper {
    display: flex;
    justify-content: space-between;
    .logo {
      display: flex;
      align-items: center;
      img {
      }
    }

    .user {
      .not-login {
      }
    }
  }
}
</style>
